<template>
  <div id="header-middle">
    <!-- 前进/返回 按钮 -->
    <div class="button-back-forward">
      <div
        :class="{
          'left-button': true,
          'is-activate': leftButton
          }"
        @click="historyGoBack">
        <i class="el-icon-arrow-left"></i>
      </div>
      <div
        :class="{
          'right-button': true,
          'is-activate': rightButton
          }"
        @click="historyGoForward">
        <i class="el-icon-arrow-right"></i>
      </div>
    </div>
    <!-- 搜索框 -->
    <div class="search">
      <input
        v-model="keyword"
        type="text"
        ref="inputRef"
        placeholder="搜索音乐、视频，歌词，电台"
        @focus="showSearchTips"
        @blur="handleInputBlur"
        @input="getSuggestThrottle"/>
      <i
        :class="{'el-icon-search': true, 'active': isInputActive}"
        @click="search"></i>
      <!-- 搜索框 -->
      <search-tips
        ref="searchTipsRef"
        :isShowSearch="isInputActive"
        @stillShow="stillShow"
        @hiddenSearch="handleInputBlur"/>
    </div>
  </div>
</template>

<script>
import SearchTips from 'components/content/search/tips/SearchTips.vue'
import { throttle } from 'utils'

export default {
  name: 'HeaderMiddle',
  components: {
    SearchTips
  },
  data () {
    return {
      isInputActive: false,
      isClickInside: false,
      // historyLength: 0
      keyword: '',
      getSuggestThrottle: null
    }
  },
  created () {
    this._getThrottle()
    // this.historyLength = history.length
  },
  computed: {
    leftButton () {
      // return history.go(-1)
      return this.$store.state.history.prevPath
    },
    rightButton () {
      // return history.go(1)
      return this.$store.state.history.nextPath
    }
  },
  methods: {
    // 1. 前进
    historyGoForward () {
      this.$router.push(this.$store.state.history.nextPath)
    },
    // 2. 后退
    historyGoBack () {
      this.$router.push(this.$store.state.history.prevPath)
    },
    // 3. 仍然显示
    stillShow () {
      this.isClickInside = true
    },
    // 4. 失去焦点触发
    handleInputBlur (mode) {
      if (this.isClickInside) {
        this.isClickInside = false
        this.$refs.inputRef.focus()
        return false
      }
      this.isInputActive = false
      this.$refs.inputRef.blur()
    },
    // 5. 点击搜索图标搜索
    search () {
      // 若keyword为空则不触发
      if (this.keyword === '') return this.$message.info('请输入搜索内容')
      this.$refs.searchTipsRef.hotsSearch(this.keyword)
      this.keyword = ''
    },
    // 6. 获取节流函数
    _getThrottle () {
      this.getSuggestThrottle = throttle(() => {
        this.getSuggest()
      })
    },
    // 7. 获取搜索建议
    async getSuggest () {
      const result = await this.$http.get('/search/suggest', {
        params: {
          keywords: this.keyword
        }
      })
      if (result.status !== 200 || result.data.code !== 200) return this.$message.info('获取搜索建议失败')
      // 获取成功
      console.log('result')
    },
    // 8. 展示搜索提示
    showSearchTips () {
      this.isInputActive = true
      this.$refs.searchTipsRef.scrollUpdate()
    }
  }
}
</script>

<style scoped lang="less">
#header-middle {
  display: flex;
  align-items: center;
  height: 100%;
  .button-back-forward {
    display: flex;
    color: rgba(255, 255, 255, .3);
    .left-button {
      width: 28px;
      height: 20px;
      border-radius: 3px 0 0 3px;
      border: 1px solid #a82828;
      &.is-activate {
        color: #fff;
        cursor: pointer;
        &:active {
          color: #961d1d;
          border: 1px solid #961d1d;
          background-color: #b12323;
        }
      }
      i {
        display: block;
        margin-top: 1px;
        margin-left: 5px;
      }
    }
    .right-button {
      width: 28px;
      height: 20px;
      border-radius: 0 3px 3px 0;
      border: 1px solid #a82828;
      transform: translateX(-1px);
      &.is-activate {
        color: #fff;
        cursor: pointer;
        &:active {
          color: #961d1d;
          border: 1px solid #961d1d;
          background-color: #b12323;
        }
      }
      i {
        display: block;
        margin-top: 1px;
        margin-left: 6px;
      }
    }
  }
  .search {
    border-radius: 22px;
    padding-left: 8px;
    margin-left: 30px;
    width: 240px;
    height: 22px;
    background-color: #a82828;
    position: relative;
    input {
      // 修改光标的颜色
      // caret-color: #fff;
      width: 202px;
      color: #fff;
      position: relative;
      background-color: #a82828;
      &::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 100%;
      }
      &::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.3);
      }
    }
    i {
      cursor: pointer;
      margin-left: 10px;
      color: #fff;
      opacity: 0.3;
      &:hover {
        opacity: 0.6;
      }
      &.active {
        opacity: 0.6;
      }
    }
  }
}
</style>
